React Development with the Shards React Library — Forms and Checkboxes

Shards React is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Form

Shards React comes with the Form component to let us add forms into our React app.

For instance, we can write:

import React from "react";
import { Form, FormInput, FormGroup } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Form className="p-1">
        <FormGroup>
          <label htmlFor="#username">Username</label>
          <FormInput id="#username" placeholder="Username" />
        </FormGroup>
        <FormGroup>
          <label htmlFor="#password">Password</label>
          <FormInput type="password" id="#password" placeholder="Password" />
        </FormGroup>
      </Form>
    </div>
  );
}

to add the Form component with FormGroup s and FormInput s to add input fields into our app.

Checkbox

We can add a checkbox with the FormCheckox component.

For example, we can write:

import React, { useState } from "react";
import { FormCheckbox } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [selected, setSelected] = useState({});
  const { orange, lemon } = selected;

  const handleChange = (e, fruit) => {
    setSelected((fruits) => ({ ...fruits, [fruit]: !selected[fruit] }));
  };

  return (
    <div className="App">
      <FormCheckbox
        checked={orange}
        onChange={(e) => handleChange(e, "orange")}
      >
        Orange
      </FormCheckbox>
      <FormCheckbox checked={lemon} onChange={(e) => handleChange(e, "lemon")}>
        Lemon
      </FormCheckbox>
    </div>
  );
}

We have the selected state which is an object.

Then we destructured the object and pass those properties into the checked prop of FormCheckbox to set the checked state of each checkbox.

Then we add the onChange handler to each checkbox to call handleChange to update the checked value.

We can turn them to toggles with the toggle prop:

import React, { useState } from "react";
import { FormCheckbox } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [selected, setSelected] = useState({});
  const { orange, lemon } = selected;

  const handleChange = (e, fruit) => {
    setSelected((fruits) => ({ ...fruits, [fruit]: !selected[fruit] }));
  };

  return (
    <div className="App">
      <FormCheckbox
        toggle
        checked={orange}
        onChange={(e) => handleChange(e, "orange")}
      >
        Orange
      </FormCheckbox>
      <FormCheckbox
        toggle
        checked={lemon}
        onChange={(e) => handleChange(e, "lemon")}
      >
        Lemon
      </FormCheckbox>
    </div>
  );
}

We can add the small and toggle props to add a small toggle:

import React, { useState } from "react";
import { FormCheckbox } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [selected, setSelected] = useState({});
  const { orange, lemon } = selected;

  const handleChange = (e, fruit) => {
    setSelected((fruits) => ({ ...fruits, [fruit]: !selected[fruit] }));
  };

  return (
    <div className="App">
      <FormCheckbox
        toggle
        small
        checked={orange}
        onChange={(e) => handleChange(e, "orange")}
      >
        Orange
      </FormCheckbox>
      <FormCheckbox
        toggle
        small
        checked={lemon}
        onChange={(e) => handleChange(e, "lemon")}
      >
        Lemon
      </FormCheckbox>
    </div>
  );
}

We can make them inline with the inline prop:

import React, { useState } from "react";
import { FormCheckbox } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [selected, setSelected] = useState({});
  const { orange, lemon } = selected;

  const handleChange = (e, fruit) => {
    setSelected((fruits) => ({ ...fruits, [fruit]: !selected[fruit] }));
  };

  return (
    <div className="App">
      <FormCheckbox
        inline
        checked={orange}
        onChange={(e) => handleChange(e, "orange")}
      >
        Orange
      </FormCheckbox>
      <FormCheckbox
        inline
        checked={lemon}
        onChange={(e) => handleChange(e, "lemon")}
      >
        Lemon
      </FormCheckbox>
    </div>
  );
}

Conclusion

We can add forms and checkbox into our React app with Shards React.